<template>
	<div>
		<bread-crumb class="bread-crumb-padding" :list="breadCrumb" :user="true"></bread-crumb>
		<div class="user-main-box">
			<user-tab-list :list="tablist"></user-tab-list>
			<div class="filter-line b-b-d flx-row-s-c">
				<span class="item-name">域名</span>
				<Input v-model.trim="domainName" placeholder="请输入关键域名词" style="width: 150px;" />
        <span class="item-name">状态</span>
        <Select v-model="status" style="width: 150px;">
          <Option
              v-for="item in statusList"
              :key="item.value"
              :value="item.value"
          >{{ item.label }}</Option
          >
        </Select>
        <span class="item-name">委托日期</span>
        <DatePicker
            v-model.trim="startTime"
            placeholder="开始时间"
            maxlength="30"
            style="width: 120px"
        />
        <div class="two-input-middle"></div>
        <DatePicker
            v-model.trim="endTime"
            placeholder="结束时间"
            maxlength="30"
            style="width: 120px"
        />

				<div class="user-strong-button line-button-size" style="margin: 0px 10px 0px 30px;" @click="searchEvent">
					搜索
				</div>
        <div class="user-normal-button line-button-size" style="margin-right: 10px" @click="reset">
          重置
        </div>
				<div class="user-normal-button line-button-size" @click="showEntrustModal">
					新的委托
				</div>
			</div>
		</div>

    <div class="user-main-box pub-m-t-20">
      <div class="filter-line search-result-line flx-row-bw-c">
        <span class="c-g f-14"
        >搜索结果共<span class="c-black"> {{ total }} </span>条</span
        >
      </div>
      <div style="position: relative">
        <Spin v-if="loading" :with-icon="true"></Spin>
        <table class="table-area">
          <thead>
          <tr>
            <th><div class="line-style" style="justify-content: center;min-width: 48px">序号</div></th>
            <th><div class="line-style">代购域名</div></th>
            <th><div class="line-style">最高预算（元）</div></th>
            <th><div class="line-style">留言</div></th>
            <th><div class="line-style">委托日期</div></th>
            <th><div class="line-style">状态</div></th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item, index) in list" :key="index">
            <td>
              <div class="line-style" style="justify-content: center;">
                <span class="normal-f">{{ index + 1 + (page - 1) * limit }}</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f f-ell-sin">{{ item.domainName }}</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f">{{ item.prePrice }}</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                  <span v-if="item.description" class="normal-f f-ell-sin">{{
                      item.description
                    }}</span>
                <span
                    v-if="item.description"
                    class="b-form-font-button"
                    @click="checkReason(item.description)"
                >详情</span
                >
                <span v-else class="normal-f f-ell-sin">--</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f">{{ item.publishTime }}</span>
              </div>
            </td>
            <td>
              <div class="line-style normal-f">
                {{ item.status | status }}
              </div>
            </td>
          </tr>
          </tbody>
        </table>
        <Empty-State
            v-if="total != null && total === 0"
            content="未搜索到任何内容！"
        ></Empty-State>
        <div class="form-page-bottom-area flx-row-c-c">
          <Page
              :total="total"
              :current="page"
              :page-size="limit"
              :page-size-opts="pageSizeOpts"
              show-elevator
              show-sizer
              show-total
              @on-change="pageChange"
              @on-page-size-change="pageSizeChange"
          />
        </div>
      </div>
    </div>
		<!-- 转移码 -->
		<Modal class="modal-tips" v-model="authCodeShow" :mask-closable="false" footer-hide width="520" :sticky="true">
			<div slot="header" class="modal-header">
				<span class="f-w-600">域名委托购买</span>
			</div>
			<div class="buy-form">
				<div class="form-item">
					<div class="form-item__label">域名：</div>
					<div class="form-item__block">
						<Input v-model="buyForm.domainName" class="buy-input" type="text" placeholder="请输入域名" />
					</div>
				</div>
				<div class="form-item">
					<div class="form-item__label">最高预算：</div>
					<div class="form-item__block">
						<Input class="buy-input" v-model="buyForm.prePrice" min="1" @input="handleInput" type="text" placeholder="请输入您的总预算" />
					</div>
				</div>
				<div class="form-item">
					<div class="form-item__label">联系人：</div>
					<div class="form-item__block mg-r-25">
						<Input class="buy-input" type="text" v-model="buyForm.username" placeholder="请输入您的称呼" />
					</div>
					<div class="form-item__right">
						<div class="form-radio-group">
							<RadioGroup v-model="buyForm.sex">
								<Radio :label="1">先生</Radio>
								<Radio :label="0">女士</Radio>
							</RadioGroup>
						</div>
					</div>
				</div>
				<div class="form-item">
					<div class="form-item__label">联系方式：</div>
					<div class="form-item__block">
						<Input class="buy-input" v-model="buyForm.mobile" type="text" placeholder="请输入您的联系方式" />
					</div>
				</div>
				<div class="form-item">
					<div class="form-item__label">备注：</div>
					<div class="form-item__block">
						<Input type="textarea" :rows="4" v-model="buyForm.content" placeholder="请输入您的备注" />
					</div>
				</div>
				<div class="form-foot">
					<div class="user-normal-button  line-button-size mg-r-25" @click="authCodeShow = false">
						取 消
					</div>
					<div class="user-strong-button  line-button-size" @click="entrustSubmit">
						提 交
					</div>
				</div>
			</div>
		</Modal>
	</div>
</template>

<script>
  import { getEntrustList, entrustSubmit } from "@/api/bidding";
  import { parseDomain } from "@/utils/formatDomain";
  import { validatePhoneNumber } from "@/utils/validate";
	import {mapGetters} from "vuex";
	export default {
		name: "Entrust",
    filters: {
      status(val) {
        let label = "--";
        switch (val) {
          case 2:
            label = "待分配";
            break;
          case 3:
            label = "处理中";
            break;
          case 4:
            label = "已拒绝";
            break;
          case 5:
            label = "待⽀付";
            break;
          case 6:
            label = "已关闭";
            break;
          case 7:
            label = "已⽀付";
            break;
          case 8:
            label = "待生产";
            break;
          case 9:
            label = "已完成";
            break;
        }
        return label;
      },
    },
		data() {
			return {
				breadCrumb: [{name: "管理中心"},{
					name: "我是买家"
				}, {
					name: "我的委托"
				}],
				tablist: [{
					name: "我的委托",
					to: "/user/entrust",
				}, ],
        statusList: [
          {
            value: 2,
            label: "待分配",
          },
          {
            value: 3,
            label: "处理中",
          },
          {
            value: 4,
            label: "已拒绝",
          },
          {
            value: 5,
            label: "待⽀付",
          },
          {
            value: 6,
            label: "已关闭 ",
          },
          {
            value: 7,
            label: "已⽀付",
          },
          {
            value: 8,
            label: "待生产",
          },
          {
            value: 9,
            label: "已完成",
          },
        ],
        loading: false,
        status: null,
        domainName: "",
        endTime: "",
        startTime: "",
        page: 1,
        limit: 10,
        // 分页设置
        total: 0,
        pageSizeOpts: [50, 100, 200],
        list: [],
				authCodeShow: false,
				authCode: '',
				buyForm: {
					sex: 1
				}
			};
		},
    head() {
      return {
        title: this.defaultTdk.title,
        meta: [
          { name: "keywords", content: this.defaultTdk.keywords },
          { name: "description", content: this.defaultTdk.description },
        ],
      };
    },
		computed: {
			...mapGetters({
				defaultTdk: "getDefaultTdk"
			}),
		},
    mounted() {
      this.getEntrustList();
    },
		methods: {
      handleInput(event) {
        this.$nextTick(() => {
          this.buyForm.prePrice = this.buyForm.prePrice.replace(/[^\d]/g, '');
        })
      },
      async entrustSubmit() {
        console.log(this.buyForm.domainName)
        let domain = parseDomain(this.buyForm.domainName, false);
        console.log(domain)
        if (!domain || domain.length === 0) {
          return this.$Message.warning('请输入正确的域名!');
        }
        if (!this.buyForm.prePrice || this.buyForm.prePrice <= 0) {
          return this.$Message.warning('请输入正确的价格!');
        }
        if (!this.buyForm.username || this.buyForm.username.length === 0) {
          return this.$Message.warning('请输入您的称呼!');
        }
        if (!this.buyForm.mobile || this.buyForm.mobile.length  === 0) {
          return this.$Message.warning('请输入您的手机号码!');
        }
        if (!validatePhoneNumber(this.buyForm.mobile)) {
          return this.$Message.warning('请输入正确的手机号码!');
        }
        let data = {
          domainName: this.buyForm.domainName,
          prePrice: this.buyForm.prePrice,
          content: this.buyForm.content,
          username: this.buyForm.username + `${this.sex === 1 ? '先生' : '女士'}`,
          mobile: this.buyForm.mobile
        }
        const res = await entrustSubmit(data);
        if (res.result) {
          this.$Message.success("委托代购提交成功！");
          this.authCodeShow = false
          this.getEntrustList();
        }
      },
      showEntrustModal() {
        this.authCodeShow = true
        this.buyForm = {
          sex: 1
        }
      },
      // 查看备注
      checkReason(description) {
        this.$Modal.warning({
          title: "查看备注",
          content: `<p>${description || "-"}</p>`,
        });
      },
      // 搜索
      searchEvent() {
        this.page = 1;
        this.getEntrustList();
      },
      reset() {
        this.page = 1;
        this.startTime = "";
        this.endTime = "";
        this.domainName = "";
        this.status = null;
        this.getEntrustList();
      },
      // 获取列表
      async getEntrustList() {
        this.loading = true;
        const params = {
          startTime: this.startTime,
          endTime: this.endTime,
          domainName: this.domainName,
          limit: this.limit,
          page: this.page,
        };
        if (this.status > 0) {
          params.status = this.status;
        }
        const res = await getEntrustList(params);
        if (res.code === 200) {
          this.list = res.data.list;
          this.total = res.data.total;
        }
        this.loading = false;
      },
      // 日期选择改变
      dateChange(date) {
        this.startTime = date[0];
        this.endTime = date[1];
      },
      // 切换页码
      pageChange(page) {
        this.page = page;
        this.getEntrustList();
      },
      // 切换pageSize
      pageSizeChange(pageSize) {
        this.limit = pageSize;
        this.pageChange(1);
      },
		},
	};
</script>

<style lang="scss" scoped>
	.mg-r-25 {
		margin-right: 25px;
	}

	.buy-form {
		padding: 20px 16px;

		.form-item {
			display: flex;
			margin-bottom: 14px;

			.form-item__label {
				width: 90px;
				text-align: right;
				font-size: 14px;
				padding-right: 10px;
				line-height: 40px;
			}

			.form-item__block {
				flex: 1;
				min-width: 0;
			}
		}

		.form-foot{
			display: flex;
			align-items: center;
			justify-content: flex-end;

		}
	}

	.form-radio-group {
		padding-top: 5px;
	}
</style>
